<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<!-- <userinfo-card :scrollTop="scrollTop" @onShare="onShare"></userinfo-card> -->
		<!-- <image class="nav-bar-bg-image" :src="navBarBg" mode="widthFix"></image> -->
		
		<view class="row-between-center padding-side-lg">
			<image class="img-size-lg border-radius-circle" :src="userInfo.avatar" mode="aspectFit"></image>
			<view class="flex-1 margin-left-lg">
				<view class="row-between-center">
					<text class="font-size-xl text-color-white">{{userInfo.nickname}}</text>
					<view class="row-center-center">
						<uni-icons class="margin-right-base" :size="22" color="#FFFFFF" type="gear"></uni-icons>
						<uni-icons :size="22" color="#FFFFFF" type="chat"  @click="onNavBarBtnTap"></uni-icons>
					</view>
				</view>
				<view class="margin-top-sm">
					<text class="font-size-base text-color-white">{{userInfo.username}}</text>
				</view>
			</view>
		</view>

		<view v-if="trackInfoList.length > 0" class="info-list">
				<navigator class="info-item" hover-class="none" v-for="(trackItem, trackItemIndex) of trackInfoList" :key="trackItemIndex" :url="trackItem.url">
					<text class="text-color-white info-value">{{trackItem.value}}</text>
					<text class="text-color-white info-title">{{trackItem.name}}</text>
				</navigator>
			</view>
			
			<!-- 订单及售后信息 -->
			<view v-if="orderInfoList.length > 0" class="bg-color-white info-list">
				<navigator class="info-item" hover-class="none" v-for="(orderItem, orderItemIndex) of orderInfoList" :key="orderItemIndex" :url="orderItem.url">
					<image class="info-image" :src="orderItem.image" mode="aspectFit"></image>
					<text class="info-title">{{orderItem.title}}</text>
					<text class="info-subtitle">{{orderItem.subtitle}}</text>
				</navigator>
			</view>
	</view>
</template>

<script>

import userinfoCard from './userinfo-card.vue';
import data from '@/data/user/index.js'
export default {
	components: {
		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false ,//是否开启吸顶。
			userInfo: {},
			trackInfoList: [],
			orderInfoList: [],
			navBarBg: '',
		};
	},
	async onLoad() {
		const userInfoPromise = data.userInfo();
		const trackInfoListPromise = data.trackInfoList();
		const orderInfoListPromise = data.orderInfoList();
		const navBarBgPromise = data.navBarBg();
		this.userInfo = await userInfoPromise;
		this.trackInfoList = await trackInfoListPromise;
		this.orderInfoList = await orderInfoListPromise;
		this.navBarBg = await navBarBgPromise;
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@mixin position($type, $positions) {
	position: $type;
	
	$options: top right bottom left;
	
	$length: length($positions);
	
	@for $i from 1 through $length {
		@if nth($positions, $i) != none {
			#{nth($options, $i)}: nth($positions, $i);
		}
	}
}

@mixin flex-layout($direction: row, $justify: center, $align: stretch) {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
	align-items: $align;
	justify-content: $justify;
}
	$nav-bar-height: 44px;
	.nav-bar-bg-image {
		width: 750rpx;
		// @include position(absolute, 0 0 none 0);
		position: absolute;
		top: 0;
		left: 0;
		bottom: none;
		right: 0;
}
	.nav-bar-placeholder {
		height: $nav-bar-height;
	}
	.nav-bar {
		// @include position(fixed, 0 0 none 0);
		position: fixed;
		background-color: white;
		opacity: 0;
		
		/* #ifndef APP-NVUE */
		z-index: 10000;
		/* #endif */
	}
	.nav-bar-left-image {
		$size: 26px*1.1;
		width: $size;
		height: $size;
	}
	
	.info-list {
		@include flex-layout(row, space-around);
		
		border-radius: 24rpx;
		margin:  0 12px 15px;
		padding: 10px 12px;
	}
	.info-item {
		@include flex-layout(column, flex-start, center);
	}
	.info-image {
		width: 26rpx;
		height: 26rpx;
	}
	.info-title {
		font-size: 14px;
		margin-top: 10px;
	}
	.info-subtitle {
		font-size: 20rpx;
		margin-top: 5rpx;
	}
	.info-value {
		font-size: 36rpx*1.2;
		height: 26rpx;
		
		@include flex-layout(row,center,center);
	}
</style>
